<template>
    <div>
      <p>
        {{ appWithVersion }}
      </p>
      <p>{{ appVersion }}</p>
      <button @click="handleChangeAppName" class="btn btn-primary">修改appName</button>
    </div>
</template>

<script>
// import { mapState } from 'vuex'
import { createNamespacedHelpers, mapGetters, mapState, mapMutations, mapActions } from 'vuex'

// const { mapState } = createNamespacedHelpers('user')
export default {
  name: 'store',
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    /* handleChangeAppName () {
      this.$store.commit('SET_APP_NAME', 'new app name')
    } */
    handleChangeAppName () {
      /* this.$store.commit({
        type: 'SET_APP_NAME',
        appName: 'new app name'
      }) */
      // this.SET_APP_NAME({ appName: 'new app name2' })
      this.updateAppName()
    },
    ...mapMutations([
      'SET_APP_NAME'
    ]),
    ...mapActions(['updateAppName'])
  },
  computed: {
    /* appName () {
      return this.$store.state.appName
    },
    userName () {
      return this.$store.state.user.userName
    },
    ...mapState([
      'appName'
    ])
      ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName
    })
    appNameWithVersion () {
      return this.$store.getters.appWithVersion
    } */
    ...mapState({
      userName: state => state.userName,
      appVersion: state => state.appVersion
    }),
    ...mapGetters(['appWithVersion'])
  }
}
</script>

<style scoped>

</style>
